﻿<%@ Page Language="C#" MasterPageFile="~/Samples/Sample.Master" AutoEventWireup="true" CodeBehind="Sortable.aspx.cs" Inherits="JQueryControlToolkit.Sample.Web.Samples.Sortable" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .dropCue
        {
            display: block;
            border: dashed 3px #CFCFCF;
            background: white;
        }
        span
        {
            margin: 5px;
        }
        span.moveable, span.fixed
        {
            border: solid 1px blue;
            background-color: #AAAAFF;
            display: block;
        }
        span.fixed
        {
            background-color: #4444FF;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
        <table width="100%">
            <tr>
                <td>
                    <asp:Panel ID="dndPanel1" runat="server" CssClass="widgets ui-widget">
                        <asp:Label ID="Label1" runat="server" CssClass="moveable ui-widget-header" Text="a" />
                        <asp:Label ID="Label2" runat="server" CssClass="moveable ui-widget-header" Text="b" />
                        <asp:Label ID="Label4" runat="server" CssClass="fixed ui-widget-header" Text="1" />
                        <asp:Label ID="Label5" runat="server" CssClass="fixed ui-widget-header" Text="2" />
                        <asp:Label ID="Label6" runat="server" CssClass="moveable ui-widget-header" Text="c" />
                        <asp:Label ID="Label3" runat="server" CssClass="fixed ui-widget-header" Text="3" />
                    </asp:Panel>
                </td>
                <td>
                    <asp:Panel ID="dndPanel2" runat="server" CssClass="widgets ui-widget">
                        <asp:Label ID="Label9" runat="server" CssClass="fixed ui-widget-header" Text="1" />
                        <asp:Label ID="Label10" runat="server" CssClass="fixed ui-widget-header" Text="2" />
                        <asp:Label ID="Label7" runat="server" CssClass="moveable ui-widget-header" Text="a" />
                        <asp:Label ID="Label8" runat="server" CssClass="moveable ui-widget-header" Text="b" />
                        <asp:Label ID="Label11" runat="server" CssClass="moveable ui-widget-header" Text="c" />
                        <asp:Label ID="Label12" runat="server" CssClass="fixed ui-widget-header" Text="3" />
                    </asp:Panel>
                </td>
            </tr>
        </table>
        <jQuery:SortableExtender ID="SortableExtender1" runat="server" DropPlaceHolderCssClass="dropCue" TargetControlSelector="$dndPanel1"
            ItemSelector=".moveable" ConnectSelector=".widgets" CursorAt="{ top:0, left:10 }" WaitForPageReady="true">
            <OnStart>
                function(event, ui)
                {
                    ui.placeholder.height(ui.item.height());
                }
            </OnStart>
            </jQuery:SortableExtender>
        <jQuery:SortableExtender id="DragDropjQueryExtender1" runat="server" DropPlaceHolderCssClass="dropCue"
            TargetControlSelector="$dndPanel2" ItemSelector=".moveable" ConnectSelector=".widgets" CursorAt="{ top:0, left:10 }" WaitForPageReady="true" />
</asp:Content>
